<template>
	<div class="cat-right">
		<ul>
			
			<li @click="GoodsList(sub.id)" v-for="(sub,index) in subCats" :key="index">
				<img :src="sub.cat_img" />
				<p>{{sub.cat_name}}</p>
			</li>
			
			
		</ul>
	</div>
</template>

<script>
	export default{
		created:function(){
			this.getCats(0)
		},
		
		beforeRouteUpdate:function(to,from,next){
			let id = to.query.id
			this.getCats(id)
			next()
		},
		data:function(){
			return {
				subCats:[]
			}
		},
		methods:{
			getCats:function(id){
				if(id==0){
					id=1
				}
				this.axios.get(process.env.VUE_APP_HOST+'/cats/'+id).then(res=>{
					this.subCats = res.data.sub_cat
				})
			},
			GoodsList:function(id){
				this.$router.push('/goodsList/'+id)
			}
		}
	}
</script>

<style>
	.cat-right{
		margin-left: 12%;
		
	}
	.cat-right img{
		width: 20vw
	}
	.cat-right li{
		float: left;
		padding: 2vw;
		text-align: center;
	}
	.cat-right p{
		padding: 2vw;
	}
</style>
